import { ref, onMounted, onUnmounted } from 'vue'
export function useContextMenu(contain) {
    const x = ref(0)
    const y = ref(0)
    const visible = ref(false)

    function showMenu(e) {
        e.preventDefault();
        e.stopPropagation()
        x.value = e.clientX
        y.value = e.clientY
        visible.value = true
    }

    function closeMenu() {
        visible.value = false
    }
    onMounted(() => {
        const container=contain.value
        try {
            container.addEventListener('contextmenu', showMenu)
            window.addEventListener('click', closeMenu, true)
            container.addEventListener('contextmenu', closeMenu, true)
        } catch (error) {
            // console.log(error)
        }
    })
    // onUnmounted(() => {
    //     const container=contain.value
    //     // console.log(container)
    //     try {
    //         window.removeEventListener('click', closeMenu)
    //         container.removeEventListener('contextmenu', showMenu)
    //         container.removeEventListener('contextmenu', closeMenu)
    //     } catch (error) {
    //         // console.log(error)
    //     }
    // })


    return {
        x,
        y,
        visible
    }
}